<template>
  <div>
    <i-page-header class="product_tabs" title="每日商户数量统计">
    </i-page-header>

    <Card :bordered="false" dis-hover class="ivu-mt">
      <Form ref="formValidate" :model="formValidate">
        <div class="search-inner">
          <div class="fx-r fx-bc">
            <div class="label">所属中队:</div>
            <div style="width: 160px" class="value">
              <Select v-model="formValidate.tissue_id">
                <Option
                  v-for="item in treeSelect"
                  :value="item.id"
                  :key="item.id"
                  >{{ item.html + item.name }}</Option
                >
              </Select>
            </div>

            <div class="label">统计时间:</div>
            <div style="width: 210px" class="value">
              <DatePicker
                v-model="formValidate.timeVal"
                format="yyyy/MM/dd"
                type="datetimerange"
                placement="bottom-start"
                placeholder="自定义时间"
                style="width: 210px"
                class="mr20"
              ></DatePicker>
            </div>

            <div class="value">
              <el-button
                @click="getSearch"
                type="primary"
                icon="el-icon-zoom-in"
                >搜索</el-button
              >
            </div>

            <div class="fx-g1"></div>
            <el-button @click="tapOutXls" icon="el-icon-connection"
              >导出XLS</el-button
            >
          </div>
        </div>
      </Form>
    </Card>

    <Table
      :columns="columns1"
      :data="tableData"
      class="mt25"
      no-userFrom-text="暂无数据"
      @on-selection-change="tapSelect"
      no-filtered-userFrom-text="暂无筛选结果"
      :loading="loading"
      highlight-row
    >
      <template slot-scope="{ row }" slot="imgs">
        <img
          v-lazy="row.logo"
          :src="row.logo"
          v-image-preview
          style="max-height: 35px; cursor: pointer"
        />
      </template>

      <template slot-scope="{ row }" slot="status">
        <el-tag v-if="row.status == 1">已读</el-tag>
        <el-tag type="info" v-else>未读</el-tag>
      </template>

      <template slot-scope="{ row }" slot="action">
        <a @click="tapEdit(row.id)">查看</a>
      </template>

      <template slot-scope="{ row }" slot="img">
        <el-avatar icon="el-icon-user-solid" :src="row.img"></el-avatar>
      </template>

      <template slot-scope="{ row, index }" slot="qrcode">
        <div @click="tapQrcode(index)" style="cursor: pointer">
          <div :id="'qrcode_' + row.id" style="width: 80px; height: 80px"></div>
        </div>
      </template>
    </Table>

    <div class="acea-row row-right page">
      <Page
        :total="page.count"
        show-elevator
        show-total
        @on-change="tapPage"
        :page-size="page.pageSize"
      />
    </div>
    <!-- </Card> -->

    <!--执行条数-->
    <div class="zx-pop fx-h fx-bc fx-ac" v-if="actionBool">
      <div class="bg"></div>
      <div class="body fx-h fx-bc fx-ac">
        {{ actionMsg }}
      </div>
    </div>
  </div>
</template>

<script>
import IPageHeader from '@/layouts/system/page-header/index'
import VueUeditorWrap from 'vue-ueditor-wrap'
import { mapState, mapActions } from 'vuex'
import UiUpload from '@/ui/upload/index'
import Setting from '@/setting'
import { SystemArea } from '../../../api/system/pub'
import UiUploadMuch from '../../../ui/upload/more_index'
import {
  SystemMember,
  SystemMemberMentorSave,
  SystemMemberVipDel,
  SystemMemberVipList,
  SystemMemberVipSave,
} from '../../../api/system/member'
import {
  SystemMerchantsAll,
  SystemMerchantsCqShDel,
  SystemMerchantsCqShSub,
  SystemMerchantsCqSqInit,
  SystemlscqList,
  SystemMerchantsShDel,
  SystemMerchantsShInit,
  SystemMerchantsShList,
  SystemshsjtjList,
  SystemOutXls,
  SystemMerchantsUserList,
  SystemMerchantsUserSave,
} from '../../../api/system/merchants'
import UserInfo from '../member/userInfo.vue'
import { SystemProjectInit } from '../../../api/system/project'
import { SystemBumenClassTree } from '../../../api/system/bumen'

export default {
  name: 'merchants_index',
  components: { UserInfo, UiUploadMuch, VueUeditorWrap, UiUpload, IPageHeader },
  computed: {},
  data() {
    return {
      title: '详情操作',
      dialogVisible: false,
      upHeaders: {},
      upUrl: '',
      actionBool: false,
      //角色列表
      treeSelect: [],
      grid: {
        xl: 7,
        lg: 7,
        md: 12,
        sm: 24,
        xs: 24,
      },

      formValidate: {},
      columns1: [
        {
          title: 'ID',
          key: 'id',
          width: 80,
        },

        {
          title: '所属中队',
          key: 'bumen_name',
          minWidth: 150,
          align: 'center',
        },
        {
          title: '个体工商户',
          key: 'gt_count',
          minWidth: 150,
          align: 'center',
        },
        {
          title: '餐饮有限公司',
          key: 'catering_count',
          minWidth: 100,
          align: 'center',
        },
        {
          title: '机关单位',
          key: 'jiguan_count',
          minWidth: 200,
          align: 'center',
        },
        {
          title: '企业食堂',
          key: 'qyst_count',
          minWidth: 100,
          align: 'center',
        },
        {
          title: '文化大礼堂',
          key: 'wh_count',
          minWidth: 100,
          align: 'center',
        },
        {
          title: '其他',
          key: 'othen_count',
          minWidth: 100,
          align: 'center',
        },
        {
          title: '未分类',
          key: 'wfl_count',
          minWidth: 100,
          align: 'center',
        },
        {
          title: '总数',
          key: 'all_count',
          minWidth: 100,
          align: 'center',
        },
        {
          title: '大型',
          key: 'maxType',
          minWidth: 100,
          align: 'center',
        },
        {
          title: '中型',
          key: 'midType',
          minWidth: 100,
          align: 'center',
        },
        {
          title: '小型',
          key: 'samType',
          minWidth: 100,
          align: 'center',
        },
        {
          title: '定期清洗',
          key: 'dq',
          minWidth: 100,
          align: 'center',
        },
        {
          title: '定期清洗率',
          key: 'dq_lv',
          minWidth: 100,
          align: 'center',
        },
        {
          title: '超期户数',
          key: 'cq',
          minWidth: 100,
          align: 'center',
        },
        {
          title: '超期率',
          key: 'cq_lv',
          minWidth: 100,
          align: 'center',
        },
        {
          title: '待核查数',
          key: 'smhc',
          minWidth: 100,
          align: 'center',
        },
        {
          title: '要求整改',
          key: 'zgai',
          minWidth: 100,
          align: 'center',
        },
        {
          title: '整改中',
          key: 'yqzg',
          minWidth: 100,
          align: 'center',
        },
        {
          title: '超时未整改',
          key: 'all_product',
          minWidth: 100,
          align: 'center',
        },
        {
          title: '统计时间',
          key: 'time',
          minWidth: 100,
          align: 'center',
        },
      ],
      userInfoUi: [],
      loading: true,
      tableData: [],
      page: {
        count: 0, //一共多少数量
        pageSize: 0, //每一页码数量
        page: 1, //当前页码
      },

      merchantsAr: [],
      activeName: 'tab_',
      tabsAr: [],

      dialogVisible2: false,
      form: {},
    }
  },

  created() {
    SystemBumenClassTree()
      .then((res) => {
        this.treeSelect = [{ name: '请选择组织', html: '', id: 0 }].concat(
          res.data
        )
      })
      .catch((res) => {
        this.$Message.error(res.msg)
      })
    this.initView()
  },
  methods: {
    initView: function () {
      this.getMemberData()
    },
    tapSelect: function (data) {
      actionData = data
    },
    /**
     * 新闻列表
     */
    getMemberData() {
      this.loading = true
      SystemshsjtjList({
        page: this.page.page,
        ...this.formValidate,
        type: this.activeName.replace('tab_', ''),
      })
        .then((res) => {
          if (res.code == 200) {
            this.tableData = res.data.list
            this.loading = false

            this.page.pageSize = res.data.pageSize
            this.page.count = res.data.pageCount
            console.log(this.page)
          } else {
            this.loading = false
            this.$alert(res.msg)
          }
        })
        .catch((res) => {
          console.log(res)
          this.loading = false
          this.$alert('网络繁忙，加载失败，请稍等片刻在尝试!', '系统提示')
        })
    },
    tapOutXls: function () {
      SystemOutXls(this.formValidate).then((res) => {
        if (res.code == 200) {
          location.href = res.data.url
        }
      })
    },
    /**
     * 关闭
     */
    editClose: function () {
      this.dialogVisible = false
    },
    /**
     * 修改数据
     */
    tapShSubmit: function () {
      if (this.form.sh_type == '' || this.form.sh_type == null) {
        this.$alert('请输入审核状态')
        return
      }

      let loading = this.$loading('提交数据中...')
      SystemMerchantsCqShSub(this.form)
        .then((res) => {
          loading.close()
          if (res.code == 200) {
            this.dialogVisible2 = false
            this.$Message.success('操作成功')
            this.getMemberData()
          } else {
            this.$alert(res.msg, '系统提示')
          }
        })
        .catch((err) => {
          loading.close()
          this.$alert('网络繁忙，加载失败，请稍等片刻在尝试!', '系统提示')
        })
    },
    /**
     * tab数据
     */
    tapTabs: function () {
      this.page.page = 1
      this.getMemberData()
    },
    /**
     * 分页
     */
    tapPage: function (index) {
      this.page.page = index
      this.getMemberData()
    },

    getSearch: function () {
      this.page.page = 1
      this.getMemberData()
    },

    tapSh: function (item) {
      this.dialogVisible2 = true
      this.form = JSON.parse(JSON.stringify(item))
    },

    tapDel: function (row) {
      this.$utils
        .confirm(this, {
          title: '确定要移除本次审核吗？',
          success: () => {
            return SystemMerchantsCqShDel({ id: row.id })
          },
        })
        .then((res) => {
          if (res.code == 200) {
            this.$message({ message: res.msg, type: 'success' })
            this.getMemberData()
          } else {
            this.$alert(res.msg)
          }
        })
        .catch((err) => {
          console.log(err)
          this.$alert('网络繁忙，加载失败，请稍等片刻在尝试!', '系统提示')
        })
    },
  },
}
</script>
<style scoped>
.platform-img {
  width: 20px;
  height: 20px;
  background: #f2f2f2;
  margin-right: 4px;
}
.platform-img img {
  width: 100%;
}

.zx-pop {
  position: fixed;
  width: 100vw;
  height: 100vh;
  left: 0;
  top: 0;
  z-index: 999;
}
.zx-pop .bg {
  position: absolute;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  top: 0;
  left: 0;
}
.zx-pop .body {
  background: #fff;
  width: 250px;
  height: 80px;
  border-radius: 10px;
  position: relative;
  z-index: 1;
}
</style>
